<template>
 <div>
    <TableBar 
    :columns="columns"
    @changeColumn="changeColumn"
    :layout="layout"
  >
    <el-row slot="top" style="margin-bottom: 25px;">
      <el-col :span="10">
        <span class="demonstration">所属种类：</span>
        <el-select 
          v-model="addtheInfo.variety" 
          placeholder="请选择" 
          @change="selectlesson" 
          filterable 
          :filter-method="dataFilter">
          <el-option
            v-for="item in varietyList"
            :key="item.id"
            :label="item.type"
            :value="item.type">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <span style="margin-left: 35px;">投入品类型：</span>
        <el-select v-model="addtheInfo.inputType" placeholder="请选择">
          <el-option
            v-for="item in inputList"
            :key="item.id"
            :label="item.type"
            :value="item.type">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" plain @click="">搜索</el-button>
      </el-col>
    </el-row>
    <el-row slot="bottom" :gutter="10" type="flex">
      <el-col >
        <el-button
          type="primary"
          plain
          size="small"
          @click="addEvent"
        >添加
        </el-button>
      </el-col>
      <el-col>
        <el-tooltip
          effect="dark"
          content="导入原辅料信息"
          placement="top-start"
        >
          <el-upload
            action="http://120.77.156.205:9608/processing/processing-material/excel"
            :show-file-list="false"
          >
            <el-button
              plain
              type="success"
              size="small"
              @click="refresh"
            >导入</el-button>
          </el-upload>
        </el-tooltip>
      </el-col>
      <el-col>
        <el-tooltip
          effect="dark"
          content="导出为EXCEL文件"
          placement="top-start"
          >
          <el-button 
            type="primary" 
            plain size="small" 
            @click="downLoadExcel"
          >导出</el-button>
        </el-tooltip>
      </el-col>
      
      <el-col>
          <el-tooltip effect="dark" content="批量删除原辅料库存信息">
            <el-button
              plain
              type="danger"
              size="small"
              @click="removeMaterial"
              v-auth="'processing_material_access_delete'"
              class="el-icon-delete-solid"
            ></el-button
          ></el-tooltip>
        </el-col>
    </el-row>
    </TableBar>

    <!-- 表格区域开始 -->
    <Table 
      :columns="columns"
      ref="tableRef"
      @selectData = "setData"
      :varietyList="varietyList"
      :productType="productType"
      :unitList="unitList"
      :inputList="inputList"
      :levelList="levelList"
      :tagStatusList="tagStatusList"
      @setAllList = "setAllList"
    />
    <!-- 表格区域结束 -->

    <!-- 添加表单开始 -->
    <AddForm
      v-show="dialogVisible"
      @close="closeEvent"
      :varietyList="varietyList"
      :productType="productType"
      :dialogVisible="dialogVisible"
      @closeDialog="closeDialog"
      :dialogTitle="dialogTitle"
      :message="message"
      :unitList="unitList"
      :inputList="inputList"
      :levelList="levelList"
      :tagStatusList="tagStatusList"
    />
    <!-- 添加表单结束 -->
 </div>
</template>

<script>
import TableBar from '../../common/TableBar.vue'
import Table from './Table.vue'
import FormInfo from './FormInfo.vue'
import AddForm from './AddForm'
import {
  getInfoBypage,
  delInfo,
  searchInfoByvariety,
  searchInfoByinputType
} from '../../../Api/processingplant/process_material'

export default {
  name:'MainTableBar',
  inject: ["reload"],
  components: { 
    TableBar,
    Table,
    FormInfo,
    AddForm
  },
  props:{
    columns: {
      Array,
    },
    
    judge:{
      Boolean
    },
    search_data:{
      Object
    }
  },
  data(){
    return{
      
      //选择所属品种数据
      selectlesson:"",
      //是否显示表单
      dialogVisible: false,
      //表头
      dialogTitle:'',
      //所属品种
      varietyList: [
        {
          id:0,
          type:'禽类/肉鸽'
        },
        {
          id:1,
          type:'食用油/调和油'
        },
        {
          id:3,
          type:'其他'
        }
      ],
      //产品类型
      productType:[
        {
          id:0,
          name:'预包装'
        },
        {
          id:1,
          name:'散货'
        },
        {
          id:2,
          name:'标品'
        },
      ],
      //电子标签状态
      tagStatusList:[
        {
          id:0,
          type:0
        },
        {
          id:1,
          type:1
        },
      ],
      //单位列表
      unitList:[
        {
          id:0,
          type:'只'
        },
        {
          id:1,
          type:'克'
        },
        {
          id:2,
          type:'千克'
        },
        {
          id:3,
          type:'斤'
        },
        {
          id:4,
          type:'盒'
        },
        {
          id:5,
          type:'罐'
        },
        {
          id:6,
          type:'箱'
        },
        {
          id:7,
          type:'件'
        },
        {
          id:8,
          type:'袋'
        },
      ],
      //投入品类型
      inputList:[
         {
          id:0,
          type:'幼崽'
        },
        {
          id:1,
          type:'兽药'
        },
        {
          id:2,
          type:'饲料'
        },
        {
          id:3,
          type:'其他'
        },
      ],
      //等级类型
      levelList:[
         {
          id:0,
          type:1
        },
        {
          id:1,
          type:2
        },
        {
          id:2,
          type:3
        },
      ],
      //批量选择信息
      selectList:[],
      time:[],
      input:'',
      form:{},
      
      stockType:[],
      layout: "search, refresh, column",
      hiddenBtn: false,
      //添加信息
      addtheInfo: {
        //原料产品入库编号
        enterNo:'',
        //原料产品SKU
        sku:'',
        //原料产品名称
        name:'',
        // 原料数量
        count:'',
        //供应商id
        supplierId:'',
        //所属种类
        variety:'',
        //产品类型
        type:'',
        //规格
        specification:'',
        //单位
        unit:'',
        //单价
        price:''
      },
      message:'立即添加',
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      allList:[]
    }
  },
  computed: {
    
  },
  watch: {
    judge:function(){
      this.setAllList()
    },
  },
  created(){
    this.setAllList()
  },
  methods:{
    //获取数据
    async setAllList() {
      const { data: res } = await getInfoBypage(
        this.page.current,
        this.page.pageSize
      );
      console.log("请求到的列表", res);
      if (res.statusCode !== 20000) {
        this.$message.error("获取原辅料数据失败");
      } else {
        if (res.data === null) {
          return this.$message.warning("搜索范围内无数据");
        }
        this.allList = res.data.records;
        this.page.total = parseInt(res.data.total);
      }
    },
    //打开添加表单
    addEvent(row){
      this.dialogTitle='添加原辅料库存信息'
      this.addInfo = row;
      this.dialogVisible = true;
    },
    //关闭表单
    closeDialog() {
      this.dialogVisible = false;
    },
    //选择隐藏列
    changeColumn(newcolumns) {
      console.log(newcolumns);
      this.columns = newcolumns;
    },
    //导入Excel
    refresh() {
      this.$refs.tableRef.setAllList();
    },
    //导出EXCEL
    downLoadExcel() {
      let name = "原辅料信息";
      window.location.href = `http://120.77.156.205:9608/processing/processing-material-enter-info/download/${name}`;
    },
    //获取所要删除的原辅料
    setData(list){
      this.selectList = list
      console.log("数组内容",this.selectList)
    },
    getinfo(){
        this.judge = !this.judge
    },
    //批量删除原辅料库存信息
    async removeMaterial() {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选原辅料信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      for(let index in this.selectList){
          this.selecOne(this.selectList[index].id)
      }
      this.$emit("getinfo")
      this.reload()
    },
    async selecOne(id){
      const {data : res} = await delInfo(id)
      console.log(res)
      if(res.statusCode == 20000){
        this.$message.success(res.message)
      }else{
        this.$message.error(res.message)
      }
    },
    //数据筛选
     dataFilter(val) {
        console.log(val);
        //console.log(this.lessonlist);
        //val监听输入的内容，this.lessonlist为接口获取的数据
        this.varietyList = val;
        if (val) { //val存在
            this.varietyList= this.allList.filter((item) => {
                if (!!~item.name.indexOf(val) || !!~item.name.toUpperCase().indexOf(val.toUpperCase())) {
                    return true
                }
            })
        } else { //val为空时，还原数组
            this.varietyList = this.allList;
        }
      },
    // 通过原辅料所属种类搜索
    async searchByVariety() {
      console.log(addtheInfo.variety);
      const {data: res} = await searchInfoByvariety(
        this.page.current,
        this.page.pageSize,
        this.varietyList
        );
      if (res.statusCode == 20000) {
        console.log(res);
        this.allList = res.data.records;
        this.page.total = parseInt(res.data.total);
        this.$message.success("查询数据成功");
      } else {
        return this.$message.error("查询数据失败");
      }
    },
    //关闭表单
    closeEvent() {
      this.setAllList();
    },
    //下载表格
    
  }
}
</script>

<style>
    body{
      display: inline;
    }
</style>